<template>
  <div class="page-container">
    <pf-table
      ref="pfTable"
      v-model="form"
      :columns="[]"
      :form-items="formItems"
      @get-table-data="getTableData"
    >
      <div slot="table-before">
        <productTable v-if="productList.length" :product-list="productList" @refresh="updateHandle" />
        <p v-else class="empty-text">暂无数据</p>
      </div>
    </pf-table>
  </div>
</template>

<script>
import { getProductList } from '@/api/product'
import productTable from './ProductTable.vue'
import { mapGetters } from 'vuex'

export default {
  name: 'Product',
  components: {
    productTable
  },
  props: {
    status: { // 产品状态  -3: 草稿  -2: 待审核  -1: 待发布  0: 已发布  1: 已下架
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      loading: false,
      form: {},
      productList: []
    }
  },
  computed: {
    ...mapGetters([
      'currentEnterprise',
      'currentSite'
    ]),
    formItems() {
      return [
        {
          type: 'input',
          label: '产品名称',
          prop: 'name'
        }, {
          type: 'input',
          label: '产品编号',
          prop: 'productNo'
        }, {
          type: 'date',
          label: '创建时间',
          prop: 'dateRange',
          span: 8,
          attrs: {
            type: 'datetimerange'
          }
        }
      ]
    }
  },

  created() {
  },
  methods: {

    getTableData({ pageNo, pageSize, ...formQuery }, done) {
      this.loading = true
      const [createStartTime = '', createEndTime = ''] = formQuery?.dateRange || []
      const data = {
        pageNo,
        pageSize,
        createStartTime,
        createEndTime,
        siteId: this.currentSite.id,
        enterpriseId: this.currentEnterprise.id,
        publishStatus: this.status,
        ...formQuery
      }
      getProductList(data).then(res => {
        this.loading = false
        this.productList = res.data || []
        done({ total: res.count || 0 })
      }).catch(() => {
        done({ data: [], total: 0 })
        this.loading = false
      })
    },

    // 更新
    updateHandle() {
      this.$refs.pfTable.getTableData()
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep .el-table {
  display: none;
}

.empty-text {
  height: 60px;
  line-height: 60px;
  text-align: center;
  border: 1px solid #EBEEF5;
  color: #909399;
  font-size: 12px;
}
</style>
